<template>
	<view :class="['btn', type]" @click="handleBtnClick">
		<slot></slot>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		onMounted,
		ref,
		watch,
		computed
	} from 'vue'
	// 页面的生命周期
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	
	const props = defineProps({
		type: {
			type: String,
			default: 'default'
		}
	})
	
	const emit = defineEmits(['onBtnClick'])
	
	function handleBtnClick() {
		emit('onBtnClick')
	}
	
	// 1.是组件的生命周期
	onBeforeMount(() => [
		console.log('onBefoceMount')
	])
	
	onMounted(() => {
		console.log('onMounted');
	})
	
	// 2.页面的生命周期
	onLoad() {
		console.log('onLoad');
	}
	
	onShow() {
		console.log('onShow');
	}
	// 这个在App H5没有执行, weapp有执行
	onReady(() => {
		console.log('onReady');
	})
	
</script>

<style lang="scss">
	.btn{
		padding: 20rpx 0;
		font-size: 40rpx;
		color: white;
		text-align: center;
		border-radius: 10rpx;
	}
	
	.default {
		background-color: #cdcdcd;
	}
	
	.primary{
		background-color: green;
	}
	
	.info{
		background-color: orange;
	}
</style>